<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="css/fileUpload.css" rel="stylesheet" type="text/css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/fileUpload.js"></script>
    <style type="text/css">
        table{
            border: none;
            border-collapse: collapse;
        }
        table tr td,table tr th{
            text-align: center;
        }
        table tr th{
            height: 30px;
            background-color: #0099FF;
        }
        table tbody tr{
            min-height: 40px;
            line-height: 25px;
            background-color: #DDDDDD;
        }
        table tbody tr:nth-child(2n){
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <h3>关于文件上传的基本演示</h3>

    <div id="fileUploadContent" class="fileUploadContent"></div>
    
    <button onclick="testUpload()">自定义函数提交</button>
    <button id="selfUploadBt">设定id提交</button>

    <h3>关于文件上传的基本说明</h3>
    <b>第一步：导入js和样式以及字体</b>
    <blockquote>
        <pre style="text-align: left;font-size: 16px;">
           &lt;link href=&quot;css/iconfont.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;<br/>
            &lt;link href=&quot;css/fileUpload.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;<br/>
            &lt;script src=&quot;http://www.jq22.com/jquery/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;<br/>
            &lt;script type=&quot;text/javascript&quot; src=&quot;js/fileUpload.js&quot;&gt;&lt;/script&gt;<br/>
        </pre>
    </blockquote>
    <b>第二步：初始化上传组件</b>
    <blockquote>
        <pre style="text-align: left;font-size: 16px;">
            //创建这个对象并且将容器的ID传入
            let wfu = new WpFileUpload("fileUploadContent");

            //初始化参数，注意：格式为json格式，如果不做设置，请填写：{}
             wfu.initUpload({
                "uploadUrl":"#",//上传文件信息地址
                "progressUrl":"#",//获取进度信息地址
                "scheduleStandard":true,
                "showSummerProgress":true,
                "showFileItemProgress":true,
                "autoCommit":false,
                "showProgressNum":false,
                "ismultiple":true,
                .................................
            });
        </pre>
    </blockquote>
    <h3>关于文件上传的参数说明</h3>
    <table style="width: 900px;">
        <thead>
            <tr>
                <th style="width: 200px">属性</th>
                <th style="width: 100px">默认</th>
                <th style="width: 100px">是否必需</th>
                <th style="width: 500px">功能</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>uploadUrl</td>
                <td>#</td>
                <td>是</td>
                <td>上传地址，后台提供的借口，用来接受前台文件的地址</td>
            </tr>
            <tr>
                <td>progressUrl</td>
                <td>#</td>
                <td>否</td>
                <td>获取上传进度信息的url，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）</td>
            </tr>
            <tr>
                <td>scheduleStandard</td>
                <td>false</td>
                <td>否</td>
                <td>是否进行模拟上传，false：不进行模拟，进行真实上传，true：进行模拟上传</td>
            </tr>
            <tr>
                <td>selfUploadBtId</td>
                <td></td>
                <td>否</td>
                <td>自定义文件上传按钮id</td>
            </tr>
            <tr>
                <td>rememberUpload</td>
                <td>false</td>
                <td>否</td>
                <td>是否记住已经上传过的文件，如果是记住，那么下次在上传的时候将不会允许，注意：当浏览器刷新的时候，这个设置将无效</td>
            </tr>
            <tr>
                <td>autoCommit</td>
                <td>false</td>
                <td>否</td>
                <td>是否自动上传</td>
            </tr>
            <tr>
                <td>isHiddenUploadBt</td>
                <td>false</td>
                <td>否</td>
                <td>是否隐藏上传按钮</td>
            </tr>
            <tr>
                <td>isHiddenCleanBt</td>
                <td>false</td>
                <td>否</td>
                <td>是否隐藏清除按钮</td>
            </tr>
            <tr>
                <td>isAutoClean</td>
                <td>false</td>
                <td>否</td>
                <td>上传完成后是否自动清除</td>
            </tr>
            <tr>
                <td>canDrag</td>
                <td>true</td>
                <td>否</td>
                <td>是否可以拖动</td>
            </tr>
            <tr>
                <td>fileType</td>
                <td>*</td>
                <td>否</td>
                <td>文件类型限制，默认不限制，注意写的是文件后缀，如：['png','jpg','docx','doc']</td>
            </tr>
            <tr>
                <td>size</td>
                <td>-1</td>
                <td>否</td>
                <td>文件大小限制,单位kB，默认不限制</td>
            </tr>
            <tr>
                <td>totalSize</td>
                <td>-1</td>
                <td>否</td>
                <td>每次上传文件总大小，不是单个文件是所有文件的总和</td>
            </tr>
            <tr>
                <td>maxFileNumber</td>
                <td>-1</td>
                <td>否</td>
                <td>每次上传文件的总个数限制</td>
            </tr>
            <tr>
                <td>ismultiple</td>
                <td>true</td>
                <td>否</td>
                <td>是否可以多选</td>
            </tr>
            <tr>
                <td>showSummerProgress</td>
                <td>true</td>
                <td>否</td>
                <td>是否显示总进度条，默认显示</td>
            </tr>

            <tr>
                <td>showFileItemProgress</td>
                <td>true</td>
                <td>否</td>
                <td>是否显示单文件进度条，默认显示</td>
            </tr>
            <tr>
                <td>showProgressNum</td>
                <td>false</td>
                <td>否</td>
                <td>是否显示进度条的值</td>
            </tr>
            <tr>
                <td>uploadFileParam</td>
                <td>files</td>
                <td>否</td>
                <td>上传文件数据的参数</td>
            </tr>
            <tr>
                <td>uploadFileParamIteration</td>
                <td>false</td>
                <td>否</td>
                <td>要上传的文件参数是否迭代，如果true：files0，files1，files2...... ，
                    如果是false：所有的文件通过一个参数uploadFileParam所设定的值（默认：files）来上传文件
                </td>
            </tr>
            <tr>
                <td>resultData</td>
                <td>null</td>
                <td>否</td>
                <td>上传成功后返回的信息将会存在该参数下</td>
            </tr>
            <tr>
                <td>beforeUpload</td>
                <td></td>
                <td>否</td>
                <td>在真正上传前面执行的函数,如：<br/>
                    <pre>
                    beforeUpload:beforeUploadFun,
                    ..........
                     function beforeUploadFun(){
                        // 真正上传前你要执行的操作
                    }
                    </pre>
                </td>
            <tr>
                <td>onUpload</td>
                <td></td>
                <td>否</td>
                <td>在上传后执行的函数,如：<br/>
                    <pre>
                        onUpload:onUploadFun,
                        ..........
                        function onUploadFun(){
                            // 上传之后执行的函数
                        }
                    </pre>
                </td>
            </tr>

        </tbody>
    </table>
    <h3>WpFileUpload几个重要的函数</h3>
    <b>1、上传状态显示:</b><br/>
    （1）上传失败：<br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">wfu.uploadError();</code><br/>
    （2）上传成功：<br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">wfu.uploadSuccess();</code><br/>
    <b>2、删除回显的文件:</b><br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">wfu.removeShowFileItem(fileId); // fileId指文件的Id</code><br/>
    <b>3、上传成功后回显文件:</b><br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">wfu.showFileResult(fileUrl,fileId,defineFileName,deleteFile,downloadFile,deleteEvent,downLoadEvent)</code><br/>
    <b style="color: red;">
    fileUrl:文件地址 <br/>
    fileId:文件Id <br/>
    defineFileName:自定义文件名，注意带后缀 <br/>
    deleteFile:是否可删除文件 <br/>
    downloadFile:是否可下载文件 <br/>
    deleteEvent:删除文件事件 ，注意，返回只有一个数据：文件的ID（fileId）<br/>
    downLoadEvent:下载文件事件，注意，返回有两个数据：文件的ID（fileId）和文件的地址（fileUrl）<br/>
    </b>
    <b/>
    <b/>
    <b>4、获取表单数据:</b><br/>
    <br/>(1)、获取普通表单数据<br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">var formData = wfu.getFormData("表单的Id")</code><br/>
    如：{"name":"zxm","age":"25","sex":"male"}
    <br/>(2)、获取上传文件格式的表单数据<br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">var formData = wfu.getFormDataOfUploadFile("表单的Id")</code><br/>
    如：[{"name":"name","value":"zxm"},{"name":"age","value":"26"},{"name":"sex","value":"male"}];
    <br/>
    <br/>
    演示：
    <form id="myform">
        姓名：<input type="text" name="name" value="张三"><br/>
        年龄：<input type="text" name="age" value="33"><br/>
        性别：<input type="radio" checked="checked" name="sex" value="female">男<input type="radio"  name="sex" value="male">女<br/>
        描述：<textarea cols="50" rows="5" name="des" >你好，这是张三，长安人士</textarea><br/>
        <button onclick="getFormData1()"><code>wfu.getFormData获取</code></button>
        <button onclick="getFormData2()"><code>wfu.getFormDataOfUploadFile获取</code></button>
    </form>

    <b>5、上传文件:</b><br/>
    <code style="font-size: 16px;line-height: 30px;margin-left: 30px">wfu.upload();</code><br/>
    <h3>关于上传注意事项：</h3>
    <p>1、可以同时关闭主进度条和文件进度条</p>
    <p>2、如果没有进度信息，设置scheduleStandard:false,progressUrl:#,默认会上传到60%，然后根据后台返回的结果进行设置成功还是失败</p>
    <p>3、如果是PHP开发，请使用上文文件参数迭代：files0，files1，files2，......... </p>
</body>
</html>

<script type="text/javascript">
    let wfu = new WpFileUpload("fileUploadContent");
    wfu.initUpload({
        "uploadUrl":"#",//上传文件信息地址
        "progressUrl":"#",//获取进度信息地址，可选，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）
        "scheduleStandard":true,
        "showSummerProgress":true,
        "showFileItemProgress":true,
        "ismultiple":true,
        "selfUploadBtId":"selfUploadBt"
    });

     function testUpload(){
         wfu.upload();
    }

    function getFormData1(){
         var formData = wfu.getFormData("myform");
         alert(JSON.stringify(formData));
    }
    function getFormData2(){
        var formData = wfu.getFormDataOfUploadFile("myform");
        alert(JSON.stringify(formData));
    }
</script>